<template>
    <div class="sdy-home-nav-list"> 
        <van-swipe 
        class="swiper-container" 
        :loop="false"
        :duration="300"
        indicator-color="pink">
            <van-swipe-item>
                <!-- 宫格展示 -->
                <van-grid :border="false" :column-num="5">
                    <van-grid-item 
                    v-for="item in navs" 
                    :key="item.id" 
                    :icon="item.img" 
                    :text="item.title" />
                </van-grid>
            </van-swipe-item> 
            <van-swipe-item>
                <van-grid :column-num="5">
                    <van-grid-item 
                    v-for="value in 10" 
                    :key="value" 
                    icon="photo-o" 
                    text="文字" />
                </van-grid>
            </van-swipe-item>    
        </van-swipe>
    </div>
</template>
<script setup lang="ts">
    const navs = [
        { id:1, title:'京东超市', img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/175540/…19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png'},
        { id:2, title:'京东超市', img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/175540/…19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png'},
        { id:3, title:'京东超市', img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/175540/…19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png'},
        { id:4, title:'京东超市', img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/175540/…19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png'},
        { id:5, title:'京东超市', img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/175540/…19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png'},
        { id:6, title:'京东超市', img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/175540/…19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png'},
        { id:7, title:'京东超市', img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/175540/…19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png'},
        { id:8, title:'京东超市', img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/175540/…19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png'},
        { id:9, title:'京东超市', img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/175540/…19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png'},
        { id:10, title:'京东超市', img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/175540/…19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png'},
    ]
</script>

<style scoped lang="scss">
    .sdy-home-nav-list {
        height: 210px;
        box-sizing: border-box;
        padding: 15px;

        > .swiper-container{
            height: 100%;
        }
    }
</style>